<template>
	<view class="screentc-box">
		<u-popup v-model="show" mode="center" height="950upx" width="638upx" border-radius="10" :closeable="true">
			<view class="screentc-box-auto">
				<view class="screen-box">
					<view class="screen">筛选</view>
					<u-picker v-model="showTime" mode="time" :params="params"></u-picker>
				</view>
				<view class="Inputtime-box">
					<view class="Inputtime">接收时间：</view>
					<view class="Timeselection">
						<view class="starttime">2021.04.13 13:09</view>
						<view class="crossbar">—</view>
						<view class="Endtime">结束时间</view>
					</view>
				</view>
				<view class="Workorderscheduling-box">
					<view class="Workorderscheduling">
						<view class="WorkorderID">工单ID：</view>
						<view class="Sponsor">发起人：</view>
					</view>
					<view class="Inputbox-box">
						<view class="Inputbox-WorkorderID">
							<u-field v-model="model.StudentID" label-width="0" :borderBottom="false" placeholder="请输入"></u-field>
						</view>
						<view class="Inputbox-Sponsor">
							<u-field v-model="model.Sponsor" label-width="0" :borderBottom="false" placeholder="请输入"></u-field>
						</view>
					</view>
				</view>
				<view class="Sourcesofclues">
					<view class="Sourcesofclues-text">工单类型：</view>
					<view class="Sourcesofclues-text-box">
						<view v-for="(item,index) in list" :key="index">
							<view :class="curror == index ? 'clue-ch' : 'clue'" @click="getCurror(index, item.name)">{{ item.name }}</view>
						</view>
					</view>
				</view>
				<view class="Sourcesofclues">
					<view class="Sourcesofclues-text">状态：</view>
					<view class="Sourcesofclues-text-box Sourcesofclues-text-box1">
						<view v-for="(items,indexs) in lists" :key="indexs">
							<view :class="currors == indexs ? 'clue-ch' : 'clue'" @click="getCurrors(indexs, items.names)">{{ items.names }}</view>
						</view>
					</view>
				</view>
				<view class="Submitbutton">
					<view class="ResetFilter">重置条件</view>
					<view class="confirm">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				form: {
					Studentname: '',
				},
				curror: '0',
				list: [
					{
						name: '跟单类型'
					}, 
					{
						name: '废单类型'
					}, 
					{
						name: '投诉类型'
					}
				],
				currors: '0',
				lists:[
					{
						names: '待处理'
					}, 
					{
						names: '处理中'
					}, 
					{
						names: '已处理'
					}
				],
				model: {
					Studentname: '',
				},
				rules: {
					Studentname: [
						{ 
							required: true, 
							message: '请输入学生的姓名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
				},
				value: '',
				mobile: '请输入',
				type: 'text',
				border: true,
				show: false,
				showTime: false,
				params: {
					
				}
			}
		},
		methods:{
			getOpen (){
				this.show = true
			},
			getCurror(index){
				this.curror = index
			},
			getCurrors(indexs){
				this.currors = indexs
			},
			getChick(){
				this.showTime = true
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>
<style>
	.screentc-box /deep/ .u-border-bottom:after{
		border-bottom-width: 0;
	}
	.screentc-box /deep/ .u-close--top-right{
		top: 18px;
	}
	.screentc-box /deep/ .u-form-item{
		padding: 0;
	}
	.screentc-box /deep/ .u-input--border{
		border-radius: 0;
	}
	.screentc-box /deep/ .u-field{
		padding: 0;
		margin-top: 0 !important;
	}
	.screentc-box /deep/ .uni-input-placeholder{
		color: #C6C6C6;
	}
	.screentc-box /deep/ .u-field__input-wrap{
		height: 30px;
	}
	.screentc-box /deep/ .u-mode-center-box{
		height: auto !important;
	}
	.screentc-box /deep/ .fild-body{
		border: 1px solid #DCDCDC;
	}
</style>

<style lang="less" scoped>
	.screentc-box{}
	.screentc-box-auto{
		padding: 30upx;
	}
	.screen-box{
		display: flex;
		padding-bottom: 25upx;
		align-items: center;
		border-bottom: 3upx solid #E5E5E5;
	}
	.screen{
		font-size: 30upx;
		font-weight: bold;
		color: #333333;
	}
	.Inputtime{
		font-size: 26upx;
		font-weight: 500;
		color: #333333;
		margin: 20upx 0;
	}
	.Timeselection{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.starttime{
		width: 45%;
		height: 31px;
		line-height: 20px;
		font-size: 22upx;
		font-weight: 400;
		color: #333333;
		padding: 10upx;
		border: 1px solid #DCDCDC;
	}
	.crossbar{
		font-size: 24upx;
		font-weight: 400;
		margin: 0 15upx;
		color: #C6C6C6;
	}
	.Endtime{
		width: 45%;
		height: 31px;
		font-size: 26upx;
		font-weight: 400;
		color: #999999;
		padding: 10upx;
		border: 1px solid #DCDCDC;
	}
	.Studentinformation{
		padding-top: 20upx;
	}
	.StudentID,.Studentname,.contactinformation,.Intentioncourse,.city{
		font-size: 26upx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 20upx;
	}
	.Sourcesofclues{
		margin: 20upx 0;
	}
	.Sourcesofclues-text{
		font-size: 26upx;
		font-weight: 500;
		color: #333333;
	}
	.Sourcesofclues-text-box{
		margin-top: 10upx;
		display: flex;
		flex-flow: row wrap;
	}
	.Sourcesofclues-text-box1 .clue,.Sourcesofclues-text-box1 .clue-ch{
		padding: 10upx 32upx;
	}
	.clue{
		font-size: 26upx;
		font-weight: 400;
		color: #666666;
		margin: 10upx 20upx 10upx 0;
		padding: 10upx 20upx;
		text-align: center;
		background: rgba(238, 238, 238, 0.4);
		border-radius: 8px;
	}
	.clue-ch{
		font-size: 26upx;
		font-weight: 400;
		color: #fff;
		margin: 10upx 20upx 10upx 0;
		padding: 10upx 20upx;
		text-align: center;
		background: #92C25B;
		border-radius: 8px;
	}
	.Submitbutton{
		display: flex;
		margin-top:50upx;
		position: relative;
	}
	.ResetFilter{
		width: 260upx;
		height: 64upx;
		line-height: 64upx;
		text-align: center;
		line-height: 64upx;
		border-radius: 10upx;
		background-color: #EEEEEE;
		color: #999999;
	}
	.confirm{
		right: 0;
		width: 260upx;
		height: 64upx;
		position: absolute;
		line-height: 64upx;
		text-align: center;
		line-height: 64upx;
		border-radius: 10upx;
		background-color: #92C25B;
		color: #FFFFFF;
	}
	.Workorderscheduling-box{
		
	}
	.Workorderscheduling{
		display: flex;
	}
	.Inputbox-box{
		display: flex;
	}
	.Inputbox-Sponsor{
		margin-left: 60upx;
	}
	.Workorderscheduling{
		width: 100%;
		font-size: 26upx;
		font-weight: 500;
		color: #333333;
		margin: 20upx 0;
	}
	.Workorderscheduling-box{
		margin-bottom: 30upx;
	}
	.WorkorderID{
		width: 45%;
	}
	.Sponsor{
		width: 45%;
		margin-left: 60upx;
	}
	.Inputbox-WorkorderID,.Inputbox-Sponsor{
		width: 50%;
	}
</style>
